<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <h4>全选</h4>
            <input type="checkbox" name="" id="" v-model="All">
            <HR></HR>
            <button @click="reverseBtn">反选</button>
            <br>
            <ul>
                <li v-for="(item, index) in arr" :key="index">
                  <input type="checkbox" v-model="item.checked" />
                  <span>{{item.name}}</span>
                </li>
              </ul>
        </div>
    </div>
</body>
<script src="http://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script>



<script>
  const app = new Vue({
    el: "#app",
    data: {
      arr: [
        {
          name: "猪八戒",
          checked: false,
        },
        {
          name: "孙悟空",
          checked: false,
        },
        {
          name: "唐僧",
          checked: false,
        },
        {
          name: "白龙马",
          checked: false,
        },
      ],
    },
    computed: {
      All: {
        get() {
         return this.arr.every(item => item.checked)
        },
        set(newVal) {
          this.arr.forEach(item => item.checked = newVal);
        },
      },
    },
    methods: {
      reverseBtn(){
        this.All = !this.All
      }
    }
  });
</script>
</html>